Next.js で Analyze する
#Next.js
How to analyze the Next.js app bundles
@next/bundle-analyzer - npm
なんか大迫力
https://gyazo.com/ea6cf0891b189a06e24ae5eae4b1afc1
timezone-support がでかすぎる
いまは date-fns-timezone じゃなくて date-fns-tz - npm
0 Dependencies
かっけぇ
置き換えた
https://gyazo.com/b08deb4919daa2d2f7241a78f1c18637
うーむ 15%ぐらいか
code:before
Page Size First Load JS
┌ ○ / 4.78 kB 217 kB
├ /_app 0 B 60.9 kB
├ ○ /404 2.79 kB 63.7 kB
├ λ /api/sitemap.xml 0 B 60.9 kB
├ λ /api/update-contents 0 B 60.9 kB
├ ○ /contributions 1.6 kB 201 kB
├ ○ /entries 2.24 kB 212 kB
├ ○ /products 2.03 kB 121 kB
└ λ /sitemap.xml 1.46 kB 62.4 kB
+ First Load JS shared by all 60.9 kB
├ chunks/8ac6cae13fb95b3f34f88f74851b66849a19c120.94b566.js 7.75 kB
├ chunks/commons.46867b.js 3.08 kB
├ chunks/framework.639a4c.js 40.3 kB
├ chunks/main.731177.js 6.46 kB
├ chunks/pages/_app.fde02f.js 2.63 kB
├ chunks/webpack.488dc2.js 751 B
└ css/3ac2e7af29508845af03.css 3.47 kB
code: after
Page Size First Load JS
┌ ○ / 4.77 kB 183 kB
├ /_app 0 B 60.9 kB
├ ○ /404 2.79 kB 63.7 kB
├ λ /api/sitemap.xml 0 B 60.9 kB
├ λ /api/update-contents 0 B 60.9 kB
├ ○ /contributions 1.59 kB 167 kB
├ ○ /entries 2.24 kB 179 kB
├ ○ /products 2.03 kB 87.5 kB
└ λ /sitemap.xml 1.46 kB 62.4 kB
+ First Load JS shared by all 60.9 kB
├ chunks/8ac6cae13fb95b3f34f88f74851b66849a19c120.94b566.js 7.75 kB
├ chunks/commons.46867b.js 3.08 kB
├ chunks/framework.639a4c.js 40.3 kB
├ chunks/main.2a8e83.js 6.46 kB
├ chunks/pages/_app.c1dea8.js 2.63 kB
├ chunks/webpack.488dc2.js 751 B
└ css/3ac2e7af29508845af03.css 3.47 kB
before
https://gyazo.com/d5bee1aeb65fdfd7ce97b0fe5656b881
after
https://gyazo.com/a33026e20ee007ecb1240bca7d958eaa
クライアント側から Firestore たたくのやめるかなあ
クライアント側から Firestore 2回叩くのやめて graphql エンドポイント1回にした
code:graphql
Page Size First Load JS
┌ ○ / 5.49 kB 136 kB
├ /_app 0 B 105 kB
├ ○ /404 2.79 kB 108 kB
├ λ /api/graphql 0 B 105 kB
├ λ /api/sitemap.xml 0 B 105 kB
├ λ /api/update-contents 0 B 105 kB
├ ○ /contributions 2.33 kB 120 kB
├ ○ /entries 3.11 kB 132 kB
├ ○ /products 2.09 kB 131 kB
└ λ /sitemap.xml 1.46 kB 106 kB
+ First Load JS shared by all 105 kB
├ chunks/240c5e5d8c0b39ca9805170d43b4d1db243d6c70.e9ed78.js 43.9 kB
├ chunks/8ac6cae13fb95b3f34f88f74851b66849a19c120.6cb381.js 7.62 kB
├ chunks/commons.a0a921.js 3.08 kB
├ chunks/framework.6c6c21.js 40.3 kB
├ chunks/main.ed77cd.js 6.43 kB
├ chunks/pages/_app.fa79b9.js 2.71 kB
├ chunks/webpack.ccf5ab.js 751 B
└ css/f385d3129b00e27c3ff6.css 3.46 kB
First Load JS はちぢんでるけど、_app で ApolloProvider 入れてるから全ページでロードする js がでかくなってるな
api は特に要らない気がするけどこういうもんだっけ
PageSpeedInsights のスコアは変わらず~ちょっとアップ、まれに mobile で 90 超えられる
https://gyazo.com/c60829bb7e7bb86712aa1d5d6b960aa7
#ログ